<template>
  <container>
    <div class="filter-container">
        <el-form ref="form" :inline="true" :model="queryParams" class="form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="角色名称" prop="name">
                        <el-input placeholder="请输入内容" v-model="queryParams.name"  prefix-icon="el-icon-search" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18" class="btn-container">
                    <el-button icon="el-icon-search" type="primary" plain @click="search">查询</el-button>
                    <el-button icon="el-icon-refresh"  @click="search('reset')">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
   <div class="btn-container">
      <el-button type="primary" plain icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
    </div>
    <el-table
        :data="dataTable"
        row-key="id"
        :indent="36"
        style="width: 100%"
        default-expand-all>
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="id" label="角色编号" ></el-table-column>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
            <div class="operation-btn">
                <el-button icon="el-icon-edit" @click="edit(scope.row.id,scope.row.name)" type="text"
                    >编辑</el-button>
                <el-popconfirm title="您确定要删除吗？"
                    @confirm="deleteById(scope.row.id,scope.row.name)">
                    <el-button icon="el-icon-delete" slot="reference" type="text" class="btn-danger">删除</el-button>
                </el-popconfirm>
            </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pagesize"
          @pagination="loadData"
        />

    <el-drawer
      :title="title"
      v-if="dialogNewVisible==true"
      :visible.sync="dialogNewVisible"
      @close="cloaseDialog"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      destroy-on-close
      size="50%"
    >
      <div class="drawer-content" style="height: 100%;">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          style="width:95%"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色名称" prop="name">
                <el-input v-model="ruleForm.name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色编号" prop="id" v-if="isAdd==false">
                <el-input readonly v-model="ruleForm.id" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <template v-if="isAdd==false">
                <span style="margin-bottom: 5px">所属成员列表</span>

                <el-table row-key="id"  :data="userList" stripe style="width: 100%;margin-top: 10px" ref="groupUser">
                  <el-table-column v-for="item in tableColumns" :key="item.prop" v-bind="item" align="center">
                    <template slot-scope="scope">
                      <div v-if="item.prop === 'index'">{{ scope.$index + 1 }}</div>
                      <div v-else-if="item.prop === 'state'">
                        <el-tag type="warning" v-if="scope.row.state==0">禁用</el-tag>
                        <el-tag>正常</el-tag>
                      </div>
                      <div v-else>{{ scope.row[item.prop] }}</div>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="usertotal>0"
                  :total="usertotal"
                  :pageSizes="[5,10,15,20]"
                  :page.sync="userParams.page"
                  :limit.sync="userParams.pagesize"
                  @pagination="getRoleUser"
                />
              </template>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="drawer-footer">
        <el-button v-if="isAdd==true" type="primary" @click="add">确认</el-button>
        <el-button v-if="isAdd==false" type="primary" @click="saveEdit">保存</el-button>
        <el-button @click="cloaseDialog">取消</el-button>
      </div>
    </el-drawer>
  </container>
</template>

<script>
import {rolesListPage, addRoles, updateRoles, deleteRoles, getRoleUsers} from '@/api/orgm/orgm'
  import Pagination from '@/components/Pagination';
  export default {
    name: "role",
    data() {
      return {
        title:'',
        isAdd:true,
        dataTable:[],
        total:0,
        usertotal:0,
        userList:[],
        userParams:{
          id:null,
          page: 1,
          pagesize: 5
        },
        // 查询参数
        queryParams: {
          name:'',
          page: 1,
          pagesize: 10
        },
        dialogNewVisible: false,
        ruleForm: {
          id:'',
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        },
        tableColumns: [
          {
            label: '序号',
            prop: 'index',
            width:'50px'
          },
          {
            label: '人员账号',
            prop: 'username'
          },
          {
            label: '人员姓名',
            prop: 'name'
          },
          {
            label: '状态',
            prop: 'state'
          }
        ],
      }
    },
    components: {
      Pagination
    },//页面加载后渲染
    mounted(){
      this.loadData();
    },
    methods:{
      //dialog关闭事件
      cloaseDialog(){
        this.dialogNewVisible = false;
        this.loadData();
      },//初始化表格数据
      loadData(){
        rolesListPage(this.queryParams).then(res => {
          if(res.error=="200"){
            this.dataTable = res.result.list;
            this.total=res.result.total;
          }
          else{
            this.$message.error("获取失败");
          }
        })
      },
      async getRoleUser(){
        const res=await getRoleUsers(this.userParams);
        if(res.error=="200"){
          this.userList=res.result.list;
          this.usertotal=res.result.total;
        }
      },
      reload(){
        this.loadData();
      },//新建
      openDialog(){
        this.title="新建";
        this.isAdd=true;
        this.ruleForm.name='';
        this.ruleForm.id='';
        this.userParams.id='';
        this.dialogNewVisible = true;
      },//编辑
      edit(id,name){
        this.isAdd=false;
        this.title="修改";
        this.ruleForm.name=name;
        this.ruleForm.id=id;
        this.userParams.id=id;
        this.getRoleUser();
        this.dialogNewVisible = true;
      },//加载所属类型
      //新增
      add(){
        if(this.ruleForm.name==""){
          this.$message.error("请填写角色名称");
          return;
        }
        addRoles(this.ruleForm).then(res => {
          if(res.error=="200"){
            this.$message.success("添加成功");
            this.dialogNewVisible = false;
            setTimeout(()=>{this.reload();},1000);
          }
          else{
            this.$message.error("增加失败");
          }
        })
      },//保存
      saveEdit(){
        updateRoles(this.ruleForm).then(res => {
          if(res.error=="200"){
            this.$message.success("修改成功");
            this.dialogNewVisible = false;
            setTimeout(()=>{this.reload();},1000);
          }
          else{
            this.$message.error("修改失败");
          }
        })
      },//删除
      deleteById(id,name){
        this.$confirm("确定要删除["+name+"]?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.ruleForm.name=name;
            this.ruleForm.id=id;
            deleteRoles(this.ruleForm).then(res => {
              if(res.error=="200"){
                this.$message.success("删除成功");
                this.dialogNewVisible = false;
                setTimeout(()=>{this.reload();},1000);
              }
              else{
                this.$message.error("删除失败");
              }
            })
					})
					.catch(() => {
            this.ruleForm.name='';
            this.ruleForm.id='';
          });
      },
      search(type) {
        if (type === 'reset') {
          this.$refs.form.resetFields();
        }
        this.reload();
      }
    }

  }

</script>
